<template>
  <div class="main">
    <div id="box" class="box" ref="box"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts"; //3.当前页面引入
// import { getReportsList } from '../../api/user.js'
let box = ref(null);
onMounted(async () => {
  let myecharts = echarts.init(box.value);
  let title = "售票数量";
  let color = ["#23FFF7", "#1786FF", "#FBD74B", "#F86680"];
  let value = [];
  let data1 = [
    { value: 400, name: "优秀" },
    { value: 389, name: "良好" },
    { value: 489, name: "及格" },
    { value: 259, name: "不及格" }
  ];

  let total = data1.reduce((a, b) => {
    return a + b.value * 1;
  }, 0);
  let legendList=[]
 data1.forEach((item,index)=>{
  legendList.push({
    backgroundColor:'rgba(0,47 ,89,.8)',
          // orient: 'vertical',
        x: '70%',
        y: 'center',
        itemWidth: 18,
        top: `${90 - (index + 2) * 13}%`,
        // itemHeight: 20,
        itemGap: 60,
        itemWidth: 130,
        itemHeight: 10,
        data:[
        {
            name: item.name,
            icon: 'circle',
            borderWidth: 0
          }
        ],
        align: 'left',
        textStyle: {
            color: '#fff',
        align: 'left',
        lineHeight: 30,
            fontSize: 15,
            padding: [0, 100, 0, 10],
            rich: {
            name: {
              padding: [4, 4,0,-60],
              color: '#fff',
              backgroundColor: 'transparent'
            },
            bfb: {
              fontSize: 12,
              padding: [4, -100, 0, 0],
              align: 'right',
              color: '#fff',
              backgroundColor: 'transparent'
            }
            }
            
        },
        formatter(name) {
            let then = option.series[0].data; //获取series中的data
            let total = 0;
            for (let i = 0; i < then.length; i++) {
                if (then[i].name != '' && then[i].name != null && then[i].name != undefined) {
                    total += parseInt(then[i].value);
                }
            }
            var str = '';
            var p = 0;
            for (let i = 0; i < then.length; i++) {
                if (then[i].name == name) {
                    p = (then[i].value / total) * 100;
                    str =`{name|${name}} {bfb|${ p.toFixed(0)}%}` 
                }
            }
            return str;
        }
  })
 })
 console.log(legendList,'legendList');
  let option = {
    backgroundColor: "rgb(0,34,69)",
    title: {
      textStyle: {
        rich: {
          a: {
            fontSize: 22,
            color: "#FFF"
          }
        }
      },
      subtext: `{a|费用占比}`,
      subtextStyle: {
        rich: {
          a: {
            fontSize: 24,
            color: "#FFF",
            padding: [0, 0, 0, 0]
          }
        }
      },
      x: "28%",
      y: "center"
    },
    color: color,
    tooltip: {
      trigger: "item"
    },
    legend:legendList,

    series: [
      {
        type: "pie",
        radius: ["45%", "60%"],
        center: ["35%", "50%"],
        data: data1,
        labelLine: {
          normal: {
            show: false
          }
        },
        label: {
          normal: {
            show: false
          }
        }
      },
      // {
      //   type: 'pie',
      //     radius: ['35%', '45%'],
      //     center: ['35%', '50%'],
      //     label: {
      //       show: false,
      //     },
      //     data: ['00'],
      //     labelLine: {
      //       show: false,
      //     },
      //   },
      
     
    ]
  };
  myecharts.setOption(option);
  window.onresize = function () {
    console.log("窗口大小发生改变了");
    // echarts适配
    myecharts.resize();
  };
});
</script>
<style scoped>
#box {
  width: 800px;
  height: 500px;
}
.main {
  /* color: rgba(107, 125, 142, 0.1) */
  padding: 10px;

  border-radius: 5px;
  height: 500px;
  margin-top: 10px;
}
</style>
